<template>
  <view class="scan-wrapper">
    <view class="scan" :style="{ '--right': `${rightPx}px`, '--bottom': `${bottomPx}px` }">
      <image :src="$image('/storeminiapp/scan.png')" @click="onToggleShow"></image>
    </view>
    <!-- 选择渠道弹窗 -->
    <u-popup
      v-model="showChannelPopup"
      border-radius="24"
      :closeable="true"
      mode="bottom"
    >
      <view class="channel-popup">
        <view class="popup-header">选择渠道</view>
        <view class="popup-body">
          <view class="item" v-for="(item, index) in onlineChannelList" :key="index" @click="selectChannel(item.thirdChannelId)">
            <image class="icon" :src="item.icon"></image>
            <view class="channel-name">{{ item.channelName }}</view>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 验证取货码弹窗 -->
    <u-popup v-model="showVerifyPopup" border-radius="24" mode="center">
      <view class="verify-popup">
        <view class="popup-header">
          <text>快速核验-饿了么</text>
          <text class="iconfont close" @click="showVerifyPopup = false">&#xe6b0;</text>
        </view>
        <view class="popup-body">
          <input class="code" v-model.trim="pickupCode" placeholder="请输入取货码" />
        </view>
        <view class="popup-footer">
          <u-button type="primary" @click="handleVerify">验证</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>

import ChannelTypeEnum from "@/common/enum/channelType"
import * as StoreApi from '@/api/store'
import store from "@/store"
import ScanCodeTypeEnum from "@/common/enum/scanCodeType"
import { isEmpty } from "@/utils/util"

const ICON_SOURCE = {
  [ChannelTypeEnum.APPLET.value]: 'icon_select_channel_xcx',
  [ChannelTypeEnum.JD.value]: 'icon_select_channel_jd',
  [ChannelTypeEnum.ELE.value]: 'icon_select_channel_elm'
}

export default {

  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  props: {
    right: {
      type: Number,
      default: 30
    },
    bottom: {
      type: Number,
      default: 100
    }
  },

  data() {
    return {
      showChannelPopup: false,
      showVerifyPopup: false,
      thirdChannelId: '',
      pickupCode: ''
    }
  },

  computed: {
    rightPx() {
      return uni.upx2px(this.right)
    },
    bottomPx() {
      return uni.upx2px(this.bottom)
    },
    channelList() {
      return store.getters.channels
    },
    allChannels() {
      return store.getters.allChannels
    },
    onlineChannelList() {
      const keys = [ChannelTypeEnum.APPLET.value, ChannelTypeEnum.JD.value, ChannelTypeEnum.ELE.value]
      return this.allChannels.filter(val => keys.includes(val.channelId)).map(item => {
        return {
          thirdChannelId: item.channelId,
          channelName: item.channelName,
          icon: this.$image(`/storeminiapp/${ICON_SOURCE[item.channelId]}.png`)
        }
      })
    },
    counter() {
      return store.getters.counter
    },
    pickup() {
      return store.getters.pickup
    },
  },
  methods: {
    onToggleShow() {
      this.showChannelPopup = true
    },
    handleScan() {
      const hasRole = this.channelList.some(item => item.thirdChannelId === ChannelTypeEnum.APPLET.value)
      if (!hasRole) {
        return this.$toast('门店未设置自营商城渠道')
      }
      uni.scanCode({
        // onlyFromCamera: true, // 只允许从相机扫码
        success: res => {
          const params = {
            type: ScanCodeTypeEnum.ORDER_VERIFY_CODE.value,
            scanResult: res.result,
            thirdChannelId: this.thirdChannelId
          }
          if (!isEmpty(this.counter)) {
            params.pickupId = this.counter.storeId
          }
          if (!isEmpty(this.pickup)) {
            params.pickupId = this.pickup.pickupId
          }
          StoreApi.scanCode(params).then(({ data }) => {
            this.showChannelPopup = false
            if (data) {
              const order = { ...data, verification: res.result }
              this.$navTo('pages/order/detail', { order: JSON.stringify(order)})
            }
          }).catch(() => {})
        },
        fail: () => {}
      })
    },
    selectChannel(thirdChannelId) {
      this.thirdChannelId = thirdChannelId
      if (thirdChannelId === ChannelTypeEnum.ELE.value) {
        this.pickupCode = ''
        this.showChannelPopup = false
        this.showVerifyPopup = true
        return
      }
      this.handleScan()
    },
    /**
     * 饿了么验证取货码
     */
    handleVerify() {
      if (!this.pickupCode) return
      StoreApi.scanCode({
        type: ScanCodeTypeEnum.ORDER_VERIFY_CODE.value,
        scanResult: this.pickupCode,
        thirdChannelId: this.thirdChannelId
      }).then(({ data }) => {
        this.showVerifyPopup = false
        if (data) {
          const order = { ...data, verification: this.pickupCode }
          this.$navTo('pages/order/detail', { order: JSON.stringify(order)})
          this.pickupCode = ''
        }
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
/* 快捷导航 */
.scan {
  position: fixed;
  right: calc(var(--window-right) + var(--right));
  bottom: calc(var(--window-bottom) + var(--bottom) + 50px);
  width: 100rpx;
  height: 100rpx;
  line-height: 1;
  z-index: 5;
  border-radius: 50%;

  image {
    width: 100%;
    height: 100%;
  }
}

.channel-popup {
  display: flex;
  flex-direction: column;
  background: #f2f2f3;

  .popup-header {
    height: 98rpx;
    line-height: 98rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    text-align: center;

    .close {
      color: #333;
      font-size: 50rpx;
    }
  }

  .popup-body {
    padding: 0 24rpx 94rpx;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border-radius: 16rpx;
      padding: 40rpx 32rpx;
      margin: 16rpx 0;

      .icon {
        width: 80rpx;
        height: 80rpx;
      }

      .channel-name {
        flex: 1;
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        padding-left: 24rpx;
      }

      .icon-arrow-right {
        font-size: 56rpx;
        color: #999;
      }
    }
  }
}

.verify-popup {
  width: calc(100vw - 64rpx);
  padding: 8rpx 32rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }

  .popup-body {
    padding-top: 24rpx;
    padding-bottom: 48rpx;

    .code {
      height: 88rpx;
      color: #333;
      background: #F5F5F5;
      border-radius: 16rpx;
      border: 2rpx solid #F0F0F0;
      padding: 0 24rpx;
      box-sizing: border-box;
    }
  }

  .popup-footer {
    padding-bottom: 24rpx;
  }
}

</style>
